<template>
	<view>
		<scroll-view scroll-y="true" class="nav-right" scroll-with-animation>

			<view class="mainPage">

				<view class="topic">
					<view class="topicname" :style="{'font-weight': 'bold'}">
						操作任务
					</view>
					<form action="">
						<view class="work">
							<view class="workName" v-text="name">
							</view>
						</view>
					</form>

				</view>
				<view class="content">

					<view class="content-topic" :style="{'font-weight': 'bold'}">
						操作事项
					</view>
					<view class="table">
						<view class="tr bg-w">
							<checkbox class="th" disabled="true" style="width: 10%;" />
							<view class="th" style="width: 30%;">序号</view>
							<view class="th" style="width: 70%;">操作项目</view>
						</view>
						<block v-for="(item, index) of listData" :key="item.order_number">
							<view class="tr bg-g" v-if="index % 2 == 0">
								<checkbox class="td" :checked="checked[item.order_number]" style="width: 10%;"
									:disabled="!isbegin" />
								<view class="td" style="width: 10%;">{{ item.order_number }}</view>
								<view class="td" v-if="!isinput" style="width: 60%;" ref="data">
									{{ item.content }}
								</view>
								<view type="text" v-else v-model="item.content" class="td" style="width: 60%;"
									ref="data" />
							</view>
							<view class="tr" v-else>
								<checkbox class="td" style="width: 10%;" :checked="checked[item.order_number]"
									:disabled="!isbegin" />
								<view class="td" style="width: 10%;">{{ item.order_number }}</view>
								<view type="text" v-if="isinput" v-model="item.content" class="td" style="width: 60%;"
									ref="data" />
								<view class="td" v-else style="width: 60%;">
									{{ item.content }}
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="bottom">
					<button size="mini" class="btn-sure btn" @click="beginClick()" v-text="btn"></button>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import Socket from '../../store/websocket.js'
	export default {
		data() {
			return {
				scrollLeftTop: '',
				scrollRightTop: '',
				socketOpen: false,
				isbegin: false,
				name: '',
				isinput: false,
				index: 0,
				tid: '',
				d_account: '',
				btn: '开始操作',
				choose: false,
				workNames: ['冷备用转热备用', '冷备用转检修', '冷备用转运行', '热备用转冷备用', '热备用转检修', '热备用转运行', '检修转热备用', '检修转冷备用', '运行转冷备用',
					'运行转热备用', '运行转检修'
				],
				checked: [],
				listData: [{
					order_number: 0,
					content: ""
				}],
				workdata: [],
			}
		},
		onLoad() {

		},
		onShow() {
			this.tid = getApp().globalData.t_id;
			this.d_account = getApp().globalData.d_account;
			this.name = getApp().globalData.t_name;
			uni.request({
				url: this.$api + '/my_tickets/selectContent',
				method: 'POST', // 请求方法
				dataType: 'text',
				data: {
					t_id: this.tid,
				}, //发送的数据
				header: {
					'Content-Type': 'application/json'
				},
				success: (res) => {
					console.log(res);
					console.log(res.statusCode);
					console.log(res.data);
					console.log(res.data.state);
					var r = JSON.parse(res.data);
					if (r.state == 200) {
						this.listData = r.data
					} else {
						uni.showToast({
							title: r.message,
							icon: 'none'
						})
					}
				}
			})
		},
		methods: {
			sendSocketMessage(msg) {
				uni.sendSocketMessage({
					data: msg
				});
				console.log("成功发送");
			},
			beginClick(e) {
				if (this.isbegin) {
					this.isbegin = false;
					this.btn = '';
					for (var i = 0; i < this.listData.length; i++) {
						// this.workdata[i].id = this.tid;
						// this.workdata[i].order_number = this.listData[i].order_number;
						if (this.checked[i]) {
							this.workdata.push({
								t_id: this.tid,
								order_number: this.listData[i].order_number,
								is_complete: 1
							});
						} else if (i > 0 && this.checked[i - 1] == true) {
							this.workdata.push({
								t_id: this.tid,
								order_number: this.listData[i].order_number,
								is_complete: 1
							});
						} else {
							this.workdata.push({
								t_id:this.tid,
								order_number: this.listData[i].order_number,
								is_complete: 1
							});
						}

					}
					console.log(this.workdata);
					uni.request({
						url: this.$api + '/my_tickets/complete',
						method: 'POST', // 请求方法
						dataType: 'text',
						data: {
							workData: this.workdata,
						}, //发送的数据
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							var r = JSON.parse(res.data);
							if (r.state == 200) {
								uni.showToast({
									title: "上传成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: r.message,
									icon: 'none'
								})
							}
						}
					})
				} else {
					var msg = {
						toUserId: this.d_account,
						contentText: this.tid
					}
					this.$socket.send('{"toUserId":"' + this.d_account + '","contentText":"' + this.tid + '"}');
					this.$socket.getMessage(res => {
						let x = JSON.parse(res.data);
						if (x.contentText == 1) {
							this.isbegin = true;
							this.btn = '完成';
						}
						console.log('现场侧接收到消息：' + x);
					})
				}
			}
		}

	}
	// export default {
	// 	data() {
	// 		return {

	// 		}
	// 	},

	// 	onLoad(option) {
	// 		   // this.getRisklist(option.id)
	// 	}
	// }
	// methods: {
	// 			// //获取各项风险详情
	// 			// getRisklist(id) {
	// 			// 	this.$ajax.get("/system/posturortdata/"+id)
	// 			// 		.then(res => {
	// 			// 			if (res.code == 200) {

	// 			// 			}
	// 			// 		})
	// 			// }
	// }
</script>

<style>
	.nav {
		width: 100%;
		height: 100%;
		display: flex;
		/* background-color: #57a68c; */
	}

	.nav-right {
		width: 100%;
		heght: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom {
		width: 100%;
		heght: 100%;
		display: flex;
		flex-direction: column;
	}

	.ticket-box {
		display: flex;
		flex-direction: row;
	}

	.click-hover {
		background-color: #006f6b;
		color: whitesmoke;
	}

	.workName {
		display: inline-block;
		width: 300px;
		height: 30px;
		align-items: center;
		border: 1px #57a68c;
	}

	.mainPage {
		width: 100%;
		height: 100%;
		flex-grow: 1;
		background-color: #fff;
		overflow: hidden;
		overflow-y: scroll;
		/* border: 10px #e6f3f9; */
		padding: 3px;
	}

	.topic {
		display: block;
		flex-shrink: 0;
		height: 80px;
		margin: 3px 4px;
		position: relative;
		border: 1px solid #9fafaf;
		padding: 5px;
	}

	.name {
		display: inline-block;
		width: 250px;
		height: 30px;
		position: absolute;
		top: 40px;
		left: 5px;
		border: 1px solid #57a68c;
		border-radius: 10rpx;
	}

	.workName {
		height: 30px;
		position: absolute;
		top: 40px;
		left: 5px;
	}

	.topicname {
		display: block;
	}

	.content {
		flex-shrink: 0;
		flex-direction: row;
		display: block;
		margin: 3px 4px;
	}

	.content-topic {
		display: block;
	}

	.table {
		color: #006f6b;
		padding: 10px;
		border: 1px solid darkgray;
		border-radius: 8rpx;
	}

	.tr {
		display: flex;

		width: 100%;

		justify-content: center;

		white-space: pre-wrap;

		word-wrap: break-word;

		height: auto;

		align-items: center;
	}

	.td {
		justify-content: center;

		text-align: center;

		white-space: pre-wrap;

		word-wrap: break-word;

		height: auto;
	}

	.bg-w {
		background: snow;
	}

	.bg-g {
		background: #e6f3f9;
	}

	.th {

		justify-content: center;

		background: #006f6b;

		color: #fff;

		display: flex;

		height: 3rem;

		align-items: center;
	}

	.btn {
		background-repeat: no-repeat;
		object-fit: contain;
		width: 25%;
		height: 15%;
		margin: 20px, 20px;
		padding: 5px;
	}

	.worker {
		width: 150px;
		height: 30px;
		border: 1px solid #57a68c;
		border-radius: 10rpx;
	}

	.btn-sure {
		background: #006f6b;
		color: #fff;
	}

	.swicths {
		position: relative;
		padding-left: 2px;
	}

	.img {
		background-repeat: no-repeat;
		object-fit: contain;
		width: 40px;
		height: 40px;
		position: absolute;
		float: left;
		left: 0px;
		top: 30%;
		border-radius: 50%;
	}
</style>
